<template>
  <basic-card :title="$t('menu.broadcast_list')" :iconClass="'iconfont icon-broadcast'">
    <basic-table
      :pageMethod="$mainApi.broadcastApi.getBroadcastByPage"
      :tableForm="tableForm"
    >
      <template #table-top="basicTable">
        <el-form ref="form" :inline="true" size="small" class="text-right">
          <el-form-item>
            <el-input
              v-model="tableForm.search"
              @change="basicTable.table.refresh"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="basicTable.table.refresh">{{
              $t("botton.search")
            }}</el-button>
            <el-button
              type="success"
              @click="showDevicesDocsFormDialop(null, {})"
              >{{ $t("botton.create") }}</el-button
            >
            <el-button
              type="danger"
              @click="showDeleteDialop(basicTable.table.selectRows)"
              :disabled="basicTable.table.selectRows.length < 1"
              >{{ $t("botton.batch_delete") }}</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <template #table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          :label="$t('broadcast.name')"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDevicesDocsFormDialop(scope.row.id, scope.row)"
              >{{ scope.row.broadcastName }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="broadcastIpAddress"
          :label="$t('broadcast.ip')"
        ></el-table-column>
        <el-table-column
          prop="broadcastCode"
          :label="$t('broadcast.call_coding')"
        ></el-table-column>
        <el-table-column
          prop="broadcastStatus"
          :label="$t('broadcast.status')"
        >
          <template slot-scope="scope">
            <span>{{ filteStatus(scope.row.broadcastStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="broadcastStatus"
          :label="$t('broadcast.input_time')"
        >
        </el-table-column>
        <el-table-column
          prop="broadcastStatus"
          :label="$t('broadcast.update_time')"
        >
        </el-table-column>
        <!-- <el-table-column prop="goodsDescribe" :label="$t('commodity.description')"></el-table-column> -->
      </template>

      <template #others-elements="basicTable">
        <basic-delete-dialop
          ref="DeleteDialop"
          @confirm="(list) => deleteData(list, basicTable.table.refresh)"
        />
      </template>
    </basic-table>
  </basic-card>
</template>
<script lang="ts">
import Vue from "vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";

export default Vue.extend({
  components: { BasicCard, BasicTable, BasicDeleteDialop },
  data() {
    return {
      tableForm: {
        search: ""
      }
    }
  },
  methods: {
    filteStatus(status: string) {
      for (const name in this.$config.BROADCAST_DEVICE_STATUS) {
        if ((this.$config.BROADCAST_DEVICE_STATUS as any)[name] === status) {
          return this.$t("broadcast_status." + name);
        }
      }
    },
    showDeleteDialop(selectRows: Array<any>) {
      if (selectRows.length < 1) {
        this.$message.warning(`${this.$t("message.plase_select", { target: this.$t('menu.broadcast_list') })}`);
      }
      const deleteList: Array<any> = [];
      selectRows.forEach((selected: any) => {
        deleteList.push({
          id: selected.id,
          label: selected.title
        });
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    },
    deleteData(list: Array<any>, refresh: Function) {
      const allPromise: Array<any> = [];

      list.forEach((item) => {
        allPromise.push(this.$mainApi.devicesDocsApi.deleteDevicesDocsById(item.id));
      });

      Promise.all(allPromise).then(() => {
        refresh();
      });
    }
  }
});
</script>
<style lang="scss" scoped>
</style>
